<template>
  <!-- 用户导入对话框 -->
  <el-dialog :title="title" :visible.sync="open" :loading="loading" width="400px" append-to-body class="uploadDialog">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="版本" prop="version">
        <el-select v-model="form.version" placeholder="请选择版本" clearable>
          <el-option
            v-for="dict in dict.type.iron_goods_version"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="headers"
               :action="baseUrl + uploadUrl + '?updateSupport=' + updateSupport" :disabled="isUploading"
               :data="form"
               :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        <el-link type="info" style="font-size:14px;color: #1890ff;" @click="downloadTemplate()">下载模板</el-link>
      </div>
      <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getToken} from "@/utils/auth";
import {deleteAction, downloadFile, downloadTemplate, getAction} from "@/api/manage";

export default {
  name: "UploadDialogForIronGoods",
  dicts: ['iron_goods_version'],
  components: {},
  data() {
    return {
      // 是否显示弹出层（用户导入）
      open: false,
      loading: null,
      // 弹出层标题（用户导入）
      title: "",
      // 是否禁用上传
      isUploading: false,
      // 是否更新已经存在的用户数据
      updateSupport: 0,
      // 设置上传的请求头部
      headers: {Authorization: "Bearer " + getToken()},
      //模板下载地址
      downloadTemplateUrl: '/export/downloadTemplate',
      // 上传的地址
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadUrl: "",
      tmplName: "",
      fileName: "",
      form: {
          version: null
      },
      // 表单校验
      rules: {
        version: [
          {required: true, message: "请选择铁件版本", trigger: "blur"}
        ]
      },
    };
  },
  created() {

  },
  methods: {
    show() {
      this.open = true;
    },

    /**
     * 下载模板通用方法
     * @param tmplName
     * @param fileName
     */
    downloadTemplate() {
      let that = this;
      let params = {};
      params.tmplName = that.tmplName;
      params.fileName = that.fileName;
      downloadFile(that.downloadTemplateUrl, params);
    },

    /** 导入按钮操作 */
    handleImport() {
      this.title = "铁件产品导入";
      this.open = true;
    },

    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.loading.close();
        //成功
        this.open = false;
        this.$refs.upload.clearFiles();
      }

      this.isUploading = false;
      this.$emit('handleFileSuccess', response);
    },
    // 提交上传文件
    submitFileForm() {
      let that = this;
      // 提示 文件上传中 上传成功后再消失
      that.loading = this.$loading({
        lock: true,
        text: '文件上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      that.$refs["form"].validate(valid => {
        if (valid) {
          that.$refs.upload.submit();
        } else {
          that.confirming = false;
        }
      });
    },

  }
}
</script>

<style lang="scss">
.uploadDialog {
  .el-dialog {
    height: 50% !important;
    min-height: 450px;
    .el-dialog__body {
      .el-upload {
        width: 100%;
      }
    }
  }
}
</style>
